@charset "utf-8";
@import "_var";
/* 公共的按钮样式 */
$btn-font-size: 14px;
$btn-width: 100px;
$btn-height: 38px;
$btn-sm-width: 70px;
$btn-sm-height: 30px;
$btn-lg-width: floor($btn-width*1.2);
$btn-lg2-width: floor($btn-width*1.5);
$btn-color: #338bf1;
$btn-bg: #fff;
$btn-border-color: #e5e5e5;

$btn-primary-color: #fff;
$btn-primary-bg: #338bf1;
$btn-primary-border-color: #2c76ce;

$btn-radius-color: #666;

$btn-info-bg: #f5f5f5;

$btn-disabled-color: #fff;
$btn-disabled-bg: #c8c8c8;
$btn-disabled-border-color: #c8c8c8;
$btn-tb: 5px;
$btn-lr: 15px;

@mixin btn() {
  display: inline-block;width: $btn-width;height: $btn-height;line-height: $btn-height;margin-bottom: 0;font-size: $btn-font-size;text-align: center;vertical-align: middle;cursor: pointer;
border-radius: 4px;border-width: 1px;border-style: solid;
}
@mixin btn-pad() {
  display: inline-block;padding: $btn-tb $btn-lr;margin-bottom: 0;font-size: $btn-font-size;text-align: center;vertical-align: middle;cursor: pointer;
  border-radius: 4px;border-width: 1px;border-style: solid;
}

@mixin btn-color($color:$btn-color,$bg:$btn-bg,$border-color:$btn-border-color) {
  color: $color;background-color: $bg;border-color: $border-color;
  &:focus,
  &:hover {background-color: darken($bg, 6%);border-color: darken($border-color, 3%);}
}
.btn{@include btn;}
button.btn {line-height: normal;}
.btn-default {@extend .btn;@include btn-color($color:$btn-color,$border-color:$btn-border-color);}
.btn-primary {@extend .btn;@include btn-color($btn-primary-color,$btn-primary-bg,$btn-primary-border-color);}
.btn-info {@extend .btn;@include btn-color($btn-color,$btn-info-bg);}
.btn-disabled {@extend .btn;@include btn-color($btn-disabled-color,$btn-disabled-bg,$btn-disabled-border-color);cursor: not-allowed;}

.btn-sm {width: $btn-sm-width;height: $btn-sm-height;line-height: $btn-sm-height;}
button.btn-sm {line-height: normal;}
.btn-lg {width: $btn-lg-width;}
.btn-lg2 {width: $btn-lg2-width;}

.btn-group {margin: 30px auto 20px;text-align: center;
  [class^='btn-'] {margin: 0 10px;}
}
/* 非定宽的btn */
.btn-pad {@include btn-pad;}
.btn-pad-default {@extend .btn-pad;@include btn-color($color:$btn-color,$border-color:$btn-border-color);}
.btn-pad-primary {@extend .btn-pad;@include btn-color($btn-primary-color,$btn-primary-bg,$btn-primary-border-color);}

/*圆角btn*/
.btn-radius {@include btn-pad;border-radius: 25px;}
.btn-radius-default {@extend .btn-radius;@include btn-color($color:$btn-radius-color,$border-color:$btn-border-color);}
.btn-radius-primary {@extend .btn-radius;@include btn-color($btn-primary-color,$btn-primary-bg,$btn-primary-border-color);}
